<template>
	<view class="container">
		<!-- 头部头像名字部分 -->
		<view class="header">
			<img :src="avatarUrl || '../../static/tx.jpg'" alt="用户头像" mode="aspectFill" class="images"/>
			      <view class="person-info"><b>{{ name }}</b><br/>{{ phoneNum }}</view>
		</view>
		<!-- 中间内容部分 -->
		<view class="content">
			<view class="neirong">
				<text class="my-service">我的服务</text>
				<view class="edit-content" @click="goEdit()">
					<text style="font-family: 'icomoon';color: #F69C8E;" ></text>
					编辑资料
					<text class="unfold">></text>
				</view>
				<view class="description" @click="goDescription()">
					<text style="font-family: 'icomoon';color: #F69C8E;" ></text>
					平台说明
					<text class="unfold">></text>
				</view>
			</view>
		</view>
	</view>
	<!-- 底部导航 -->
	<!-- <view class="bottom-tabbar">
	  <view class="tabbar-item" @click="goHome">
	    <uni-icons type="home" size="24"></uni-icons>
	    <view>首页</view>
	  </view>
	  <view class="tabbar-item" @click="goStudyRecord">
	    <uni-icons type="wallet-filled" size="24"></uni-icons>
	    <view>学习记录</view>
	  </view>
	  <view class="tabbar-item" @click="goMy">
	    <uni-icons type="auth" size="24"></uni-icons>
	    <view>我的</view>
	  </view>
	</view> -->
</template>

<script>
	// import { ByPhone } from '@/api/userApi.js';
	export default {
		data() {
			return {
				avatarUrl:'',
				name:'',
				phoneNum:'',
			}
		},
		async onLoad() {
		  await this.loadCachedData(); // 等待缓存加载完成
		  // this.fetchUserByPhone();     // 再调用接口
		   this.$eventBus.$on('user-data-updated', this.handleUserUpdate);
		    },
		    onUnload() {
		      // 页面卸载时移除监听
		      this.$eventBus.$off('user-data-updated', this.handleUserUpdate);
		    },
		methods: {
			// 新增方法：处理用户数据更新事件
			    handleUserUpdate(updatedData) {
			      console.log('收到用户数据更新事件', updatedData);
			      this.avatarUrl = updatedData.avatarUrl || this.avatarUrl;
			      this.name = updatedData.nickName || this.name;
			      this.phoneNum = updatedData.phone || this.phoneNum;
			      

			    },
			goStudyRecord(){
				uni.navigateTo({
					url:'/pages/record/record'
				})
			},
			goHome(){
				uni.navigateTo({
					url:'/pages/main/main'
				})
			},
			goEdit(){
				uni.navigateTo({
					url:"/pages/EditDate/EditDate"
				})
			},
			goDescription(){
				uni.navigateTo({
					url:'/pages/description/description'
				})
			},
			 async loadCachedData() {
			     try {
			       const res = await uni.getStorage({ key: 'user' });
			       this.avatarUrl = res.data.avatarUrl;
			       this.name = res.data.nickName;
			       this.phoneNum = res.data.phone;
			     } catch (err) {
			       console.error('读取缓存失败', err);
			     }
		},

		}
	}
</script>

<style>
	.container{
		overflow: hidden;
		width: 100%;
		min-height: 66vh;
		background: linear-gradient(to bottom, #FF5733 0%, white 80%, white 80%, white 100%);
	}
	.container .header{
		overflow: hidden;
		width: 80%;
		height: 200rpx;
		 /* background-color: lightblue; */
		margin-left: 60rpx;
		margin-top: 30rpx;
	}
	.container .header .images{
		width: 150rpx;
		height: 150rpx;
		border-radius: 150rpx;
		border: 1px solid white;
		float: left;
	}
	.container .header .person-info{
		margin-left: 15rpx;
		margin-top: 38rpx;
		float: left;
		color: white;
	}
	/* 中间内容部分 */
	.container .content{
		overflow: hidden;
		width: 80%;
		min-height: 68vh;
		margin-left: 65rpx;
		background-color: white;
		margin-top: 20rpx;
		border-radius: 50rpx;
	}
	.container .content .neirong{
		width: 95%;
		height: 220rpx;
		/* background-color: gold; */
		margin-top: 15rpx;
		margin-left: 15rpx;
	}
	.container .content .neirong .my-service{
		font-weight: bolder;
		margin-bottom: 5rpx;
	}
	.container .content .neirong .edit-content{
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		/* background-color: lightgreen; */
		border-bottom: 1px solid #F7F7F7;
	}
	.container .content .neirong .edit-content .unfold{
		float: right;
		color: #6F6F6F;
	}
	.container .content .neirong .description{
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		/* background-color: lightgreen; */
		border-bottom: 1px solid #F7F7F7;
	}
	.container .content .neirong .description .unfold{
		float: right;
		color: #6F6F6F;
	}
	.bottom-tabbar {
	  background-color: white;
	  display: flex;
	  border-top: 1px solid #f2f2f2;
	}
	
	.tabbar-item {
	  flex: 1;
	  text-align: center;
	  padding: 10px 0;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  color: #333;
	}
	.go-end {
	  white-space: nowrap;
	  padding: 5px 12px;
	  background-color: #a5a09d;
	  color: #fff;
	  border-radius: 4px;
	  font-size: 14px;
	  border: none;
	}
</style>